<template>
  <div class="csii-dynamic-form-item">
    <el-form-item :label="control.label" :prop="control.key">
      <template v-if="control.controlType === 'input'">
        <el-input
          :type="control.nativeType"
          autocomplete="off"
          :placeholder="control.placeholder"
          v-model="model._value"
        ></el-input>
      </template>

      <template
        v-if="
          control.controlType === 'inputs' && Array.isArray(control.subControls)
        "
      >
        <el-row type="flex" justify="space-between">
          <el-col
            :key="idx"
            :span="colSpan"
            v-for="(subControl, idx) in control.subControls"
          >
            <el-input
              autocomplete="off"
              :type="control.nativeType"
              :placeholder="subControl.placeholder"
              v-model="model._value[idx]"
            ></el-input>
          </el-col>
        </el-row>
      </template>

      <template v-if="control.controlType === 'input-with-image'">
        <el-row type="flex" justify="space-between">
          <el-col :span="18">
            <el-input
              :placeholder="control.placeholder"
              v-model="model._value"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <img :src="control.imageUrl" alt style="height: 40px;" />
          </el-col>
        </el-row>
      </template>

      <template v-if="control.controlType === 'input-with-button'">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <el-input
              :placeholder="control.placeholder"
              v-model="model._value"
            ></el-input>
          </el-col>
          <el-col :span="11">
            <el-button
              ref="timer"
              type="primary"
              size="medium"
              :disabled="disabled"
              @click.native="getDynamicVerifyCode"
              >{{ control.buttonText ? control.buttonText : "获取" }}</el-button
            >
          </el-col>
        </el-row>
      </template>

      <template v-if="control.controlType === 'select'">
        <template v-if="control.multiple">
          <el-select
            style="width: 100%"
            multiple
            :placeholder="control.placeholder"
            v-model="model._value"
          >
            <el-option
              :key="idx"
              :label="item.label"
              :value="item.value"
              v-for="(item, idx) in control.options"
            ></el-option>
          </el-select>
        </template>
        <template v-else>
          <el-select
            style="width: 70%"
            :placeholder="control.placeholder"
            v-model="model._value"
          >
            <el-option
              :key="idx"
              :label="item.label"
              :value="item.value"
              v-for="(item, idx) in control.options"
            ></el-option>
          </el-select>
        </template>
      </template>
    </el-form-item>
  </div>
</template>

<script scoped>
export default {
  name: "csii-dynamic-form-item",

  props: {
    control: {
      type: Object,
      required: true
    },

    value: {
      type: [String, Array],
      required: true
    }
  },

  computed: {
    colSpan() {
      return Math.floor(
        (24 - (this.control.subControls.length - 1) * 2) /
          this.control.subControls.length
      );
    }
  },

  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.model._value = newVal;
      }
    },
    model: {
      deep: true,
      handler() {
        this.$emit("input", this.model._value);
      }
    }
  },

  data() {
    return {
      model: {
        _value: ""
      },
      time: 0,
      timer: null,
      disabled: false
    };
  },

  methods: {
    getDynamicVerifyCode() {
      this.startTimer();
    },

    startTimer() {
      if (!this.timer) {
        this.time = 60;
        this.disabled = true;
        this.$refs.timer.$el.innerText = this.time + "s后可再次获取";
        this.timer = setInterval(() => {
          if (this.time > 0) {
            this.time--;
            this.$refs.timer.$el.innerText = this.time + "s后可再次获取";
          } else {
            this.time = 0;
            this.disabled = false;
            this.$refs.timer.$el.innerText = this.control.buttonText || "获取";

            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style scoped></style>
